<!--  -->
<template>
	<div style="background-color: #545c64;">
		<div class="app-title">
			<span>跟单软件 v{{ver}}</span>
			<br/>
		</div>
		<el-menu
			:default-active="activeIndex"
			@select="handleSelect"
			class="el-menu-demo"
			mode="horizontal"
			background-color="#545c64"
			text-color="#fff"
			active-text-color="#ffd04b">
			<el-menu-item index="home">我的工作台</el-menu-item>
			<el-menu-item index="setting">全局设置</el-menu-item>
		</el-menu>
	</div>
</template>

<!--		:default-active="activeIndex2"
		@select="handleSelect"
		<el-menu-item index="3" disabled>消息中心</el-menu-item>-->
<!--		<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
<!--  <div class="window-title" v-if="!IsUseSysTitle&&!IsWeb">
    &lt;!&ndash; 软件logo预留位置 &ndash;&gt;
    <div style="-webkit-app-region: drag;" class="logo" v-if="isNotMac">
      <svg-icon icon-class="electron-logo"></svg-icon>
    </div>
    &lt;!&ndash; 菜单栏位置 &ndash;&gt;
    <div></div>
    &lt;!&ndash; 中间标题位置 &ndash;&gt;
    <div style="-webkit-app-region: drag;" class="title"></div>
    <div class="controls-container" v-if="isNotMac">
      <div class="windows-icon-bg" @click="Mini">
        <svg-icon icon-class="mini" class-name="icon-size"></svg-icon>
      </div>
      <div class="windows-icon-bg" @click="MixOrReduction">
        <svg-icon v-if="mix" icon-class="reduction" class-name="icon-size"></svg-icon>
        <svg-icon v-else icon-class="mix" class-name="icon-size"></svg-icon>
      </div>
      <div class="windows-icon-bg close-icon" @click="Close">
        <svg-icon icon-class="close" class-name="icon-size"></svg-icon>
      </div>
    </div>
  </div>-->
<script>
import {ipcRenderer} from "electron";
import Vue from "vue";
export default {
	data: function () {
		return {
			ver: Vue.app_version,
			activeIndex: this.$route.path.indexOf('setting') !== -1 ? "setting" : "home",
			mix: false,
			IsUseSysTitle: false,
			isNotMac: process.platform !== "darwin",
			IsWeb: process.env.IS_WEB
		}
	},
	components: {},
	created() {
		ipcRenderer.invoke("IsUseSysTitle").then(res => {
			this.IsUseSysTitle = res;
		});
		// this.checkUpgrade();
	},
	mounted() {
		ipcRenderer.on("w-max", (event, state) => {
			this.mix = state
		})
	},
	
	methods: {
		handleSelect(e, keyPath) {
			if(e === 'setting' && this.$route.path !== '/setting') {
				this.$router.replace("/setting");
			}
			if(e === 'home' && this.$route.path !== '/') {
				this.$router.replace("/");
			}
			// if(e !== this.activeIndex) {
			// 	if (e === 'setting') {
			// 		this.$router.replace("/setting");
			// 	} else {
			// 		this.$router.replace("/");
			// 	}
			// 	this.activeIndex = e;
			// }
		},
		/*Mini() {
			ipcRenderer.invoke("windows-mini");
		},
		MixOrReduction() {
			ipcRenderer.invoke("window-max").then(res => {
				this.mix = res.status
			})
		},*/
		Close() {
			ipcRenderer.invoke("window-close");
		}
	},
	destroyed() {
		ipcRenderer.removeAllListeners("w-max");
	}
};
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
.app-title {
	text-align: center;
	color: #fff;
	padding-top: 10px;
	-webkit-app-region: drag;
	cursor: pointer
}

.el-menu-demo {
	padding: 0px 20px 0;
}

.window-title {
	width: 100%;
	height: 30px;
	line-height: 30px;
	display: flex;
	-webkit-app-region: drag;
	position: fixed;
	top: 0;
	z-index: 99999;
	
	.title {
		text-align: center;
	}
	
	.logo {
		margin-left: 20px;
	}
	
	.controls-container {
		display: flex;
		flex-grow: 0;
		flex-shrink: 0;
		text-align: center;
		position: relative;
		z-index: 3000;
		-webkit-app-region: no-drag;
		height: 100%;
		width: 138px;
		margin-left: auto;
		
		.windows-icon-bg {
			display: inline-block;
			-webkit-app-region: no-drag;
			height: 100%;
			width: 33.34%;
			color: rgba(129, 129, 129, 0.6);
			
			.icon-size {
				width: 12px;
				height: 15px;
			}
		}
		
		.windows-icon-bg:hover {
			background-color: rgba(182, 182, 182, 0.2);
			color: #333;
		}
		
		.close-icon:hover {
			background-color: rgba(232, 17, 35, 0.9);
			color: #fff;
		}
	}
}
</style>